<!-- page content -->
<div id="dashboardVue" class="right_col" role="main">
    <!-- top tiles -->
    <div class="row" style="display: inline-block">
        <div class="tile_count">
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
                <div class="count">2500</div>
                <span class="count_bottom"><i class="green">4% </i> From last Week</span>
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
                <div class="count">123.50</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Males</span>
                <div class="count green">2,500</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Females</span>
                <div class="count">4,567</div>
                <span class="count_bottom"
                ><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
                <div class="count">2,315</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
                <div class="count">7,325</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
                >
            </div>
        </div>
    </div>
    <!-- /top tiles -->

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div id="dashboard_line_flot" style="height: 400px"></div>
        </div>
    </div>
    <br/>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <!-- <div id="main" class="dashboard_line" style="width: 600px; height: 400px"></div> -->
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="dashboard_line" style="height: 400px"></div>
        </div>
    </div>
    <br/>
</div>

<!-- echart -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<!-- Flot -->
<script src="/vendors/Flot/jquery.flot.js"></script>
<script src="/vendors/Flot/jquery.flot.pie.js"></script>
<script src="/vendors/Flot/jquery.flot.time.js"></script>
<script src="/vendors/Flot/jquery.flot.stack.js"></script>
<script src="/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="/vendors/flot.curvedlines/curvedLines.js"></script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var dashboardVue = new Vue({
        el: "#dashboardVue",
        data() {
            return {
                coronavirus: []
            }
        },
        methods: {
            initCoronavirus() {
                var self = this;
                $.ajax({
                    url: "/api/coronaviruses",
                    success: function (res) {
                        if (res.status === 200) {
                            self.$message({
                                type: "success",
                                message: res.message
                            });
                            self.coronavirus = res.data;
                            self.initLineEcharts();
                            self.initLineFlot();
                        } else {
                            self.$message({
                                type: "info",
                                message: "获取数据失败！"
                            });
                        }
                    },
                    error: function (err) {
                        self.$message({
                            type: "error",
                            message: "服务器走丢啦！"
                        });
                    },
                });
            },
            initLineFlot: function () {
                var chart_plot_01_settings = {
                    series: {
                        lines: {
                            show: false,
                            fill: true,
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4,
                        },
                        points: {
                            radius: 0,
                            show: true,
                        },
                        shadowSize: 2,
                    },
                    grid: {
                        verticalLines: true,
                        hoverable: true,
                        clickable: true,
                        tickColor: "#d5d5d5",
                        borderWidth: 1,
                        color: "#fff",
                    },
                    colors: [
                        "rgba(38, 185, 154, 0.38)",
                        "rgba(3, 88, 106, 0.38)",
                        "rgba(22, 155, 144, 0.28)",
                        "rgba(33, 166, 122, 0.14)",
                    ],
                    xaxis: {
                        tickColor: "rgba(51, 51, 51, 0.06)",
                        mode: "time",
                        tickSize: [1, "day"],
                        //tickLength: 10,
                        axisLabel: "Date",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Verdana, Arial",
                        axisLabelPadding: 10,
                    },
                    yaxis: {
                        ticks: 8,
                        tickColor: "rgba(51, 51, 51, 0.06)",
                    },
                    tooltip: false,
                };

                var diagnosis = [];
                var overseasImport = [];
                var cure = [];
                var death = [];
                $.each(this.coronavirus, function (i, item) {
                    diagnosis.push([new Date(item.date), item.diagnosis]);
                    overseasImport.push([new Date(item.date), item.overseasImport]);
                    cure.push([new Date(item.date), item.cure]);
                    death.push([new Date(item.date), item.death]);
                });

                var gzbds = [];
                // 画图，将所有图轨加入到 list 中
                gzbds.push({label: "<div style='color: #0b2e13'>确诊数</div>", data: diagnosis});
                gzbds.push({label: "<div style='color: #0b2e13'>输入数</div>", data: overseasImport});
                gzbds.push({label: "<div style='color: #0b2e13'>治愈数</div>", data: cure});
                gzbds.push({label: "<div style='color: #0b2e13'>死亡数</div>", data: death});

                $.plot($("#dashboard_line_flot"), gzbds, chart_plot_01_settings);
            },
            initLineEcharts() {
                var legends = ["确诊数", "输入数", "治愈数", "死亡数"];
                var xAxis = [];
                var diagnosis = [];
                var overseasImport = [];
                var cure = [];
                var death = [];
                $.each(this.coronavirus, function (i, item) {
                    xAxis.push(item.date);
                    diagnosis.push(item.diagnosis);
                    overseasImport.push(item.overseasImport);
                    cure.push(item.cure);
                    death.push(item.death);
                })
                var myChart = echarts.init(document.getElementById("dashboard_line"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "最近7天疫情信息",
                    },
                    tooltip: {},
                    legend: {
                        data: legends,
                    },
                    xAxis: {
                        data: xAxis
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "确诊数",
                            type: "line",
                            data: diagnosis,
                        },
                        {
                            name: "输入数",
                            type: "line",
                            data: overseasImport,
                        },
                        {
                            name: "治愈数",
                            type: "line",
                            data: cure,
                        },
                        {
                            name: "死亡数",
                            type: "line",
                            data: death,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },
        mounted() {
            this.initCoronavirus();
        }
    })
</script>
